<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jet-CMS | Comment</title>
    <link type="text/css" rel="stylesheet" th:href="@{/pure-min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/main.css}" />
    <script type="text/javascript" th:src="@{/main.js}"></script>
    <script type="text/javascript" th:src="@{/vue-min.js}"></script>
    <style>
        .table td a {
            font-size: 14px;
            color: #0095cf
        }
        .table textarea {
            margin: 0;
            width: 200px;
            height: 100px;
            border: 1px solid #eee;
            resize: none;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span th:include="home/_nav"></span>
        <div class="container">
            <div class="pure-g">
                <div class="pure-u-1-2">
                    <button type="button" v-on:click="status=-1" v-bind:class="{'btn-blue': status===-1}" class="pure-button">全部</button>
                    <button type="button" v-on:click="status=0" v-bind:class="{'btn-blue': status===0}" class="pure-button">待审核</button>
                    <button type="button" v-on:click="status=1" v-bind:class="{'btn-blue': status===1}" class="pure-button">已公开</button>
                </div>
                <div class="pure-u-1-4">
                    总数：<b>{{allCount}}</b> 个
                </div>
                <div class="pure-u-1-4 text-right">
                    <form class="pure-form" v-on:submit.prevent="search">
                        <input type="text" class="pure-input" v-model="keyword">
                        <button type="submit" class="pure-button">搜索</button>
                    </form>
                </div>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th style="width:200px;">内容标题</th>
                        <th style="width:80px;">用户</th>
                        <th>评论内容</th>
                        <th>回复</th>
                        <th style="width:160px;">操作时间</th>
                        <th style="width:100px;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in commentList">
                        <td>
                            <a href="javascript:;" v-if="item.contentTitle">{{item.contentTitle}}</a>
                        </td>
                        <td>
                            <a href="javascript:;" v-if="item.userName!=''">{{item.userName}}</a>
                        </td>
                        <td>{{item.content}}</td>
                        <td><textarea v-on:change="replyComment(item.id, $event)" v-bind:value="item.reply"></textarea></td>
                        <td>
                            <b>提交时间：</b>{{dateFormat('y-m-d h:i', item.createTime*1000)}}<br>
                            <b>回复时间：</b>{{item.replyTime != 0 ? dateFormat('y-m-d h:i', item.replyTime*1000) : '未回复'}}
                        </td>
                        <td>
                            <button type="button" class="pure-button btn-green" v-on:click="setStatus(item.id, 1)" v-if="item.status==0">通过</button>
                            <button type="button" class="pure-button btn-red" v-on:click="setStatus(item.id, 0)" v-else>驳回</button>
                            <button type="button" class="pure-button btn-orange" v-on:click="deleteComment(item.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <pagination ref="pageView"></pagination>
        </div>
    </div>
</body>
<script>
    const LIMIT = 10;
    const vue = new Vue({
        el: '#app',
        data: {
            offset: 0,
            bid: '[[${bid}]]',
            status: -1,
            keyword: '',
            commentList: [],
            allCount: 0
        },
        components: {
            pagination: Pagination
        },
        watch: {
            status: function() {
                vue.offset = 0;
                vue.loadCommentList();
            }
        },
        methods: {
            init: function(){
                this.$refs['pageView'].init(LIMIT, 5);
                this.$refs['pageView'].setCallback(function(page){
                    vue.offset = (page - 1) * LIMIT;
                    vue.loadCommentList();
                });
                this.loadCommentList();
            },
            search: function() {
                this.offset = 0;
                this.loadCommentList();
            },
            replyComment: function(id, event) {
                httpRequest(
                    '/comment/replyComment.do',
                    {id: id, reply: event.originalTarget.value},
                    function(res) {
                        if (res.code != 1) {
                            alert(res.error);
                        }
                    },
                    'json'
                );
            },
            setStatus: function(id, status) {
                httpRequest(
                    '/comment/setStatus.do',
                    {id: id, status: status},
                    function(res) {
                        if (res.code == 1) {
                            vue.loadCommentList();
                        } else {
                            alert(res.error);
                        }
                    },
                    'json'
                );
            },
            deleteComment: function(id) {
                if (confirm('确定要删除评论吗？')) {
                    httpRequest(
                        '/comment/delete.do',
                        {id: id},
                        function(res) {
                            if (res.code == 1) {
                                vue.loadCommentList();
                            }
                        },
                        'json'
                    );
                }
            },
            loadCommentList() {
                httpRequest(
                    '/comment/getCount.do',
                    {bid: this.bid, status: this.status, keyword: this.keyword},
                    function(res) {
                        if (res.code == 1) {
                            vue.allCount = res.result;
                            vue.$refs['pageView'].setData(res.result);
                        }
                    },
                    'json'
                );
                httpRequest(
                    '/comment/getList.do',
                    {offset: this.offset, limit: LIMIT, bid: this.bid, status: this.status, keyword: this.keyword},
                    function(res) {
                        if (res.code == 1) {
                            vue.commentList = res.result;
                        }
                    },
                    'json'
                );
            }
        }
    });
    vue.init();
</script>
</html>